<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="x5-orientation" content="portrait">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="x5-orientation" content="portrait">  <!-- qq强制竖屏 -->
    <title>说出祝福</title>
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        }
        return null;
    };
    var code_ = GetQueryString('code');
    // alert(window.location.href);
    if(!code_){
        window.location.href = 'http://wxapi.ngrok.xiaomiqiu.cn/open/authorize_url?redirectUrl=' + encodeURIComponent('http://wxweb.ngrok.xiaomiqiu.cn/');
    }
    //获取wx配置
    $.ajax({
        url: 'http://wxapi.ngrok.xiaomiqiu.cn/open/config?url=' + encodeURIComponent(window.location.href),
        type: 'get',
        async: false,
        success: function (data) {
            var data_ = data.data;
            console.log('datadata',data)
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data_.appId, // 必填，公众号的唯一标识
                timestamp: data_.timestamp, // 必填，生成签名的时间戳
                nonceStr: data_.nonceStr, // 必填，生成签名的随机串
                signature: data_.signature,// 必填，签名，见附录1
                url:data_.url,
                jsApiList: ['checkJsApi','startRecord','stopRecord','translateVoice','stopVoice',
                            'uploadVoice','downloadVoice','playVoice','onVoicePlayEnd','onMenuShareTimeline',
                            'onMenuShareAppMessage','onMenuShareQZone','onMenuShareQQ','onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.error(function(res){
                console.log('error',res)
            });
        }
    });
    
    </script>
     
</head>
<body style="position: relative;">
    <div class="main-view">
        <!-- 我的礼物与分享祝福泡泡 -->
        <div class="head-bubble">
              <div class="center share-box" style="left: 1rem;top: 0rem">
                <div class="line h140"></div>
                <!-- <div class="share"></div> -->
                <img src="./img/share.gif" alt="" class="share">
            </div>
            <div class="center my-gift-box" style="left: 0;top: 4.7rem;">
                <div class="line h40"></div>
                <!-- <div class="my-gift"></div> -->
                <img src="./img/price.gif" alt="" class="my-gift">
            </div>

            <!-- 规则 -->
            <div class="rule"></div>
        </div>

         <!-- 动画泡泡 -->
        <img class="bubble1" src="./img/ios/bubble.png" style="width: 2rem;position: absolute; bottom: 5rem;left: 15rem;">
        <img class="bubble2" src="./img/ios/bubble.png" style="width: 2.5rem;position: absolute;bottom: -5rem;left: 10rem">
        <img class="bubble3" src="./img/ios/bubble.png" style="width: 3rem;position: absolute;bottom: -5rem;right: 5rem;">
        <img class="bubble4" src="./img/ios/bubble.png" style="width: 3.5rem;position: absolute;bottom: -5rem;left: 17rem;">
        <img class="bubble5" src="./img/ios/bubble.png" style="width: 2.5rem;position: absolute;bottom: -5rem;left: 6rem;">
        <img class="bubble6" src="./img/ios/bubble.png" style="width: 2.5rem;position: absolute;bottom: -5rem;left: 11rem;">
        
        <!-- 录音gif -->
        <div class="voice-gif center" style="display: none;">
            <img src="./img/voice_gif.gif" alt="">
        </div>

        <!-- 分享提示 -->
        <div class="cover-hint" style="display: none;">
            <img src="./img/pic.png" alt="">
        </div>
        
        <!-- 规则页 -->
        <div class="rule-page" style="display: none;">
            <div class="head space-between">
                <img class="back-home" src="./img/ios/back_btn.png" alt="">
                <h2>规则</h2>
                <div></div>
            </div>
            <br>
            <div>
               <p>
                   ①活动期间12月24日9点起至12月30日24点，用户通过页面传递有声祝福，皆可获得由往往交友平台提供的抽奖机会；未在活动范围时间内传递有声（录制语音祝福）无法获得参与本次活动的权利。
               </p> 
               <br>
               <p>
                    ②用户点击链接进入活动页面，即可参与活动，所有第一次参与活动的用户均享有2次游戏机会。 
               </p>
               <br>
               <p>
                    ③每位参与活动的用户，通过分享圣诞祝福，均可获得每日1次的游戏机会。
               </p>
               <br>
               <p>
                    ④参与活动所获得奖品，将记录在【我的奖品】中，用户可随时进行查看。
               </p>
               <br>
               <p>
                    ⑤活动结束后，请在规定时间内按【领奖说明】兑换奖品，如超出时间，我们将直接取消其相关奖项。
               </p>
            </div>
        </div>

        <!-- 我的奖品页 -->
        <div class="my-gift-page" style="display: none;">
            <div class="head space-between">
                <img class="back-home" src="./img/ios/back_btn.png" alt="">
                <h2>我的奖品</h2>
                <div></div>
            </div>
            <div id="myGifts" class="center">
                
            </div>

            <div class="center myGifts-btn">
                <button id="dot"></button>
            </div>

            <div class="state">
                <div>
                    <p>
                        1.领奖时间：<br>2018年1月4日到1月11日 
                        上午09:00-11:30
                        下午13:30-17:00
                    </p>
                    <br>
                    <p>
                        2.领奖方式：<br>
                        参加“有声祝福，玩出大礼”圣诞活动的网友需登录往往APP，与客服核对有效信息，以便及时发放礼品。
                        奖品领取流程如下：
                        登录往往APP→搜索添加Fan聊“有声祝福玩出大礼”→与官方客服“往妹”核对获奖账号信息→确认收奖信息→等待奖品发放
                    </p>
                    <br>
                    <p>
                        3.领奖说明：<br>
                         * 请在活动截止时间前领取礼品，逾期作废。<br>
                         * 参加者收奖信息如有变更，请及时联系客服变更，若出现因信息有误、不齐全或不清楚的导致活动礼品无法正常发放的情况，活动主办方不对由此产生的任何后果负责。<br>
                         * 除钻值外，所有礼品均由第三方提供，一旦发放享受同等售后服务，但不接受退换。<br>
                         * 本次活动最终解释权归成都壕得很科技有限公司所有。 
                    </p>
                   
                </div>
            </div>
            <div class="center">
                <button id="dot"></button>
            </div>
        </div>

        <div class="gifts-box center">
            <img class="show-gift" src="./img/iphone.png" style="width: 3rem;top: 7rem;left: 12.5rem;" alt="">
            <div class="tree-user-vioce center" style="top: 7.5rem;left: 18rem;">
                <img data-voice="" class="play" src="./img/ios/play.png" alt="">
                <img class="stop" src="./img/ios/stop.png" alt="" style="display: none;">
                <img class="user-head" src="./img/test.jpg" alt="">
            </div>
             <div class="tree-user-vioce center" style="top: 14.5rem;left: 9.5rem;">
                <img data-voice="" class="play" src="./img/ios/play.png" alt="">
                <img class="stop" src="./img/ios/stop.png" alt="" style="display: none;">
                <img class="user-head" src="./img/test.jpg" alt="">
            </div>
            <div class="tree-user-vioce center" style="top: 17rem;left: 21rem;">
                <img data-voice="" class="play" src="./img/ios/play.png" alt="">
                <img class="stop" src="./img/ios/stop.png" alt="" style="display: none;">
                <img class="user-head" src="./img/test.jpg" alt="">
            </div>
            <div class="tree-user-vioce center" style="bottom: 10.5rem;left: 7rem;">
                <img data-voice="" class="play" src="./img/ios/play.png" alt="">
                <img class="stop" src="./img/ios/stop.png" alt="" style="display: none;">
                <img class="user-head" src="./img/test.jpg" alt="">
            </div>
            <img src="./img/gift1.png"  style="width: 3rem;left: 15rem;" alt="">
            <img src="./img/钻值3.png" style="width: 3rem;left: 19rem;top: 14rem;" alt="">
            <img src="./img/钻值1.png" style="width: 2rem;bottom: 15rem;left: 13rem" alt="">
            <img src="./img/小米手环.png"  style="width: 3.5rem;bottom: 10rem;left: 13rem" alt="">
            <img src="./img/钻值2.png" style="width: 2rem;bottom: 8rem;left: 9rem" alt="">
            <img src="./img/口红.png"  style="width: 3rem;bottom: 10rem;left: 17.5rem" alt="">
            <img src="./img/零食大礼包.png"  style="width: 5rem;bottom: 9rem;margin-left: 8rem" alt="">
            <!-- //动画部分 -->
            <div id="tree-animation-box" class="animation-box center" style="bottom: -40rem">
                <div class="tree-user-vioce center" style="top: 0;">
                    <img id="current-user" data-voice="" src="./img/ios/play.png" alt="">
                    <img id="current-user-stop" src="./img/ios/stop.png" alt="" style="display: none;">
                    <img class="current-user-head" src="./img/test.jpg" alt="">
                </div>
                <!-- <img class="bubble1" src="./img/ios/bubble.png" style="width: 2rem;top: 5rem;left: 15rem;">
                <img class="bubble2" src="./img/ios/bubble.png" style="width: 2.5rem;top:9rem;">
                <img class="bubble3" src="./img/ios/bubble.png" style="width: 3rem;bottom: 8rem;right: 5rem;">
                <img class="bubble4" src="./img/ios/bubble.png" style="width: 3.5rem;left: 17rem;bottom: 13rem;">
                <img class="bubble5" src="./img/ios/bubble.png" style="width: 2.5rem;bottom: 8rem;left: 6rem;">
                <img class="bubble6" src="./img/ios/bubble.png" style="width: 2.5rem;bottom: 16rem;left: 11rem;"> -->
            </div>
        </div>
        
        <div class="record-vioce-btn">
            <div>
                <button class="nothing" id="talkBtn"></button>
                <div class="nothing" id="draw-lottery"></div>
                <p id="chance-num">今日还有<span></span>次抽奖机会</p>
            </div>
        </div>
        <div class="loop-box">
            <div class="between">
                <img src="./img/gift1.png" alt="">
                <span>XXX获得三等奖</span>
            </div>
            <div class="between">
                <img src="./img/iphone.png" alt="">
                <span>XXX获得一等奖</span>
            </div>
            <div class="between">
                <img src="./img/小米手环.png" alt="">
                <span>XXX获得二等奖</span>
            </div>
            <div class="between">
                <img src="./img/gift1.png" alt="">
                <span>XXX获得三等奖</span>
            </div>
            <div class="between">
                <img src="./img/iphone.png" alt="">
                <span>XXX获得一等奖</span>
            </div>
            <div class="between">
                <img src="./img/小米手环.png" alt="">
                <span>XXX获得二等奖</span>
            </div>

        </div>
        <div class="buttom-affrim-box" style="display: none;">
            <img class="back" src="./img/ios/back.png" alt="">
            <img class="affrim" src="./img/ios/affrim.png" alt="">
        </div>

        <div class="modal-box center" style="display: none">
            <div class="modal-share-box"></div>
            <div class="modal-content center">
                <h3>恭喜您获得</h3>
                <p id="get-gift"></p>
            </div>
        </div>

        <div id="errorScreen" style="display: none">
                <p>请切换竖屏浏览！</p>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>